// 存储浏览器  1：localstorage  2:cookie
// 1：写一个工具型方法用于存储
// 2：存储（值改变了就存储）
// 3:初始值获取浏览器存储
// 持久化：1：值改变了就存储  2：初始值获取浏览器存储
// 实际开发几乎不用
// 这种方式太麻烦
/*
// 插件方式实现vuex存储
      vuex-persistedstate:作用专门用于vuex数据持久化存储的
      1：安装 yarn add vuex-persistedstate
      2:导入（在vuex的根模块导入） import persistedstate from 'vuex-persistedstate'
      3:配制
        {
            state,mutations,actions,getters,
            plugins:[persistedstate({
                // 模块名.属性名：只持久化该属性
                // 模块名：整个模块的所有数据都持久化
                // 不配制该参数paths,默认是所有vuex数据都持久化
                paths:['模块名.属性名','模块名']
            })]
        }

*/
// import { setToken, getToken } from '@/utils/auth'
import { sysLogin, sysProfile, sysUser } from '@/api/login'
import router, { asyncRoutes, resetRouter, constantRoutes } from '@/router'

export default {
  namespaced: true,
  state: {
    // token: getToken() || ''
    abc: '123',
    token: '',
    userInfo: ''
  },
  mutations: {
    SETTOKEN(state, value) {
      state.token = value
      // 存储到浏览器cookie
      //   setToken(value)
    },
    SETABC(state, value) {
      state.abc = value
    },
    // 修改用户信息
    SETUSERINFO(state, value) {
      state.userInfo = value
    },
    // 删除token与用户信息
    LOGOUT(state) {
      state.userInfo = ''
      state.token = ''
      // 重置路由
      resetRouter()
    }
  },
  actions: {
    // 登录
    async toLogin(ctx, form) {
      const res = await sysLogin(form)
      ctx.commit('SETTOKEN', res.data)
    },
    // 获取用户信息
    async getUserInfo(ctx) {
      const res = await sysProfile()
      const res2 = await sysUser(res.data.userId)
      // console.log('用户信息', res.data)
      // console.log('用户信息2', res2.data)

      /*
        // 合并对象
        1：  {...a对象,...b对象}
        2：Object.assign(目标对象，需要合并的对象a,需要合并的对象b)
      */
      const res3 = Object.assign({}, res.data, res2.data)
      ctx.commit('SETUSERINFO', res3)
      // 根据用户的权限数据来添加相应路由
      // 匹配数据
      //  权限数据  res3.roles.menus
      //  动态路由  asyncRoutes
      // 从动态路由中过滤出有权限数据的路由
      // [1,2,3].includes(3)
      const newArr = asyncRoutes.filter((item) => {
        return res3.roles.menus.includes(item.meta.name)
      })
      newArr.push({ path: '*', redirect: '/404', hidden: true })
      // 添加路由
      router.addRoutes(newArr)
      // addRoutes添加的路由不能立马使用，它需要再经过一次导航守卫beforeEach才可用
      // 1:不要让404匹配到   将404通过addRoutes添加到最后
      // 2:让添加的路由再经过一次导航守卫  next(to)
      // 修改routes
      // 菜单问题：原因：router.options.routes的值它并不会因为addRoutes添加后更新
      // 我们要手动帮它更新  router.options.routes.push(...newArr)
      router.options.routes = [...constantRoutes, ...newArr]
      // console.log('newArr', newArr)
    }
  }
}
